<template>
	<view>
		<view class="box">
			<view class="box-title flex vertical-center fn-25 fn-w hairline--bottom">
				<image style="width: 38rpx;" class="mr-10" src="../../static/course/time.png" mode="widthFix"></image>
				选择日期
			</view>
			<view class="calendar">
				<view class="dateBox">
					<view @click="onPrevious" class="date-icon icon-back"></view>
					<text>{{ year }}年{{ month }}月</text>
					<view @click="onNext" class="date-icon icon-right"></view>
				</view>
				<view class="weeks">
					<view class="week" v-for="(item, index) in date" :key="index">{{ item }}</view>
				</view>
				<view class="date-list">
					<view 
						class="item" 
						:class="{ 
							'left-radius': !dateArr[index - 1].status,
							'right-radius': !dateArr[index + 1].status,
							'radius': !dateArr[index - 1].status && !dateArr[index + 1].status,
							'interval-bg': item.status, 
							active: item.dateNum === selectToday , 
							'is-day': todayIndex === index
							}" 
							:style="{ height: `${sysW}px` }"
							v-for="(item, index) in dateArr"
							:key="index"
							@click="handleClickTay(item)"
						>
						<text>{{ item.dateNum || '' }}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="box">
			<view class="box-title flex vertical-center fn-25 fn-w hairline--bottom">
				<image style="width: 41rpx;" class="mr-10" src="../../static/course/shangke.png" mode="widthFix"></image>
				上课信息
			</view>
			<view class="box-item flex vertical-center mt-20">
				<text>上课时间：</text>
				<view>
					<picker 
						:disabled="disabled" 
						mode="time" 
						:value="timeData.startTime" 
						start="07:00" end="23:59" 
						@change="bindTimeChange($event, 1)">
						<view class="box-choose">{{timeData.startTime}}</view>
					</picker>
				</view>
				<text>---</text>
				<view>
					<picker 
						:disabled="disabled" 
						mode="time" 
						:value="timeData.endTime" 
						start="07:00" 
						end="23:59" 
						@change="bindTimeChange($event, 2)">
						<view class="box-choose">{{timeData.endTime}}</view>
					</picker>
				</view>
			</view>
			<view class="box-item flex vertical-center mt-10">
				<text>上课教室：</text>
				<view class="box-choose">{{ timeObj.room}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { toast } from "@/utils/util.js"
	export default {
		props: {
			choosedate: {
				type: Array,
				default: () => []
			},
			timeObj: {
				type: Object,
				default: null
			},
			disabled:{
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				count: 0,
				year: 0,
				month: 0,
				sysW: 0,
				date: ['日', '一', '二', '三', '四', '五', '六'],
				dateArr: [],
				selectToday: 0,
				isTodayWeek: false,
				todayIndex: 0,
				list: [22, 23, 24, 25, 26, 27],
				timeData: {
					astrictdate: [],
					selectToday: null,
					startTime: "08:00",
					endTime: "18:00"
				}
			};
		},
		watch: {
			timeData: {
				handler(val) {
					this.$emit("timechange", val)
				},
				deep: true
			}
		},
		mounted() {
			let now = new Date();
			let year = now.getFullYear();
			let month = now.getMonth() + 1;
			this.year = year;
			this.month = month;
			this.sysW = (this.WindowWidth - 60) / 7;
			this.isToday = '' + year + month + now.getDate();
			this.getCalendar(year, month);
			if(this.timeObj.startTime) {
				// this.timeData = JSON.parse(JSON.stringify(this.timeObj))
				console.log(this.timeObj)
				this.timeData.startTime = this.timeObj.startTime;
				this.timeData.endTime = this.timeObj.endTime;
			}
		},
		methods: {
			// 选择日期
			handleClickTay(item) {
				if(!item.status || this.disabled) {
					return
				}
				this.selectToday = item.dateNum;
				this.timeData.selectToday = `${this.year}-${this.formatNumber(this.month)}-${this.formatNumber(item.dateNum)}`;
			},
			// 选择时间
			bindTimeChange(e, index) {
				let timeType = index == 1 ? "start" : "end";
				this.timeData[`${timeType}Time`] = e.detail.value;
				let { startTime, endTime } = this.timeData;
				// 此处开始时间如果大于结束时间，将结束时间重置为选择的开始时间后一个小时
				if(startTime && endTime) {
					let start = parseInt(startTime.split(":")[0]);
					let end = parseInt(endTime.split(":")[0]);
					if(start > end) {
						this.timeData.endTime = `${start + 1}:00`
					}
				}
			},
			
			// 选择教室
			bindClassroomChange(e) {
				this.timeData.classroomIndex = parseInt(e.detail.value);
			},
			
			getCalendar(year, month) {
				this.todayIndex = -1;
				this.dateArr = this.setDateList(this.choosedate, this.dateInit(year, month - 1));
			},

			onPrevious() {
				//全部时间的月份都是按0~11基准，显示月份才+1
				let year = this.month - 2 < 0 ? this.year - 1 : this.year;
				let month = this.month - 2 < 0 ? 11 : this.month - 2;
				this.year = year;
				this.month = month + 1;
				this.getCalendar(year, month + 1);
			},

			onNext() {
				//全部时间的月份都是按0~11基准，显示月份才+1
				let year = this.month > 11 ? this.year + 1 : this.year;
				let month = this.month > 11 ? 0 : this.month;
				this.year = year;
				this.month = month + 1;
				this.getCalendar(year, month + 1);
			},
			
			setDateList(list, dateArr) {
				if (list.length > 0) {
					for (var i = 0; i < dateArr.length; i++) {
						if (dateArr[i].dateNum) {
							for (var j = 0; j < list.length; j++) {
								dateArr[i].status = dateArr[i].isToday == list[j].replace(/-/g,'') ? true : false;
								if (dateArr[i].isToday == list[j].replace(/-/g,'')) {
									break;
								}
							}
						}
					}
					return dateArr;
				} else {
					return dateArr;
				}
			},
			dateInit(setYear, setMonth) {
				//全部时间的月份都是按0~11基准，显示月份才+1
				let dateArr = []; //需要遍历的日历数组数据
				let arrLen = 0; //dateArr的数组长度
				let now = setYear ? new Date(setYear, setMonth) : new Date();
				let year = setYear || now.getFullYear();
				let nextYear = 0;
				let month = setMonth || now.getMonth(); //没有+1方便后面计算当月总天数
				let nextMonth = month + 1 > 11 ? 1 : month + 1;
				if (month + 1 > 10) {
					var _month = month + 1;
				}
				if (month + 1 < 10) {
					var _month = '0' + (month + 1);
				}
				if (month + 1 == 10) {
					var _month = month + 1;
				}
				// let _month = (month + 1) > 10 ? (month + 1) : '0' + (month + 1)
				let times = year + '-' + _month + '-' + '01';
				let startWeek = new Date(times).getDay(); //目标月1号对应的星期
				let dayNums = new Date(year, nextMonth, 0).getDate(); //获取目标月有多少天
				let obj = {};
				let num = 0;

				if (month + 1 > 11) {
					nextYear = year + 1;
					dayNums = new Date(nextYear, nextMonth, 0).getDate();
				}  
				
				arrLen = startWeek + dayNums;
				
				let nowDate = new Date();
				let nowYear = nowDate.getFullYear();
				let nowMonth = nowDate.getMonth();
				let nowDay = nowDate.getDate();
				
				for (let i = 0; i < arrLen; i++) {
					if (i >= startWeek) {
						num = i - startWeek + 1;
						obj = {
							isToday: year + this.formatNumber(month + 1) + this.formatNumber(num),
							dateNum: num,
						};
						if(year == nowYear && month== nowMonth && num == nowDay) {
							this.todayIndex = i;
						} 
					} else {
						obj = {};
					}
					dateArr[i] = obj;
				}
				
				return dateArr;
			},
			formatNumber (n) {
			  n = n.toString()  
			  return n[1] ? n : '0' + n  
			} 
		}
	};
</script>

<style lang="scss" scoped>
	.box {
		background-color: $color-white;
		box-shadow: 3rpx 3rpx 10rpx rgba(#eee, 0.1);
		padding: 20rpx;
		border-radius: 5rpx;
		margin-bottom: 30rpx;

		&-title {
			padding-bottom: 20rpx;
		}
		
		.calendar {
			margin: 0 auto;
			position: relative;

			.dateBox {
				font-size: 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.date-icon {
					padding: 30rpx 20rpx;
					font-weight: bold;
					font-size: 30rpx;
				}
			}

			.weeks {
				display: flex;

				.week {
					flex: 1;
					text-align: center;
					height: 60rpx;
					line-height: 60rpx;
					background-color: #f4f7ff;
					box-sizing: border-box;
				}
			}

			.date-list {
				display: flex;
				flex-wrap: wrap;

				.item {
					width: calc(100% / 7);
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 30rpx;
					text{
						position: relative;
						z-index: 2;
					}
				}
				.active{
					position: relative;
					z-index: 2;
					&::after{
						content: "";
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						background-color: $color-primary !important;
						border-radius: 50%;
					}
				}
				.is-day{
					position: relative;
					z-index: 2;
					&::after{
						content: "";
						position: absolute;
						top: 20rpx;
						right: 20rpx;
						width: 10rpx;
						height: 10rpx;
						border-radius: 10rpx;
						background-color: $color-red;
					}
				}
				.interval-bg {
					background-color: lighten($color-primary, 20);
				}
				.left-radius {
					border-radius: 20rpx 0 0 20rpx;
				}
				.right-radius {
					border-radius: 0 20rpx 20rpx 0;
				}
				.radius{
					border-radius: 20rpx !important;
				}
			}
		}
		.box-item{
			font-size: 25rpx;
			padding-left: 30rpx;
			.box-choose{
				margin: 0 20rpx;
				height: 43rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0 15rpx;
				background-color: $color-primary;
				min-width: 100rpx;
			}
		}
		
	}
</style>
